<template>
  <el-dialog
    :title="type == 'add' ? '添加分类' : '修改分类'"
    v-model="visible"
    width="500px"
  >
    <el-form :model="ruleForm" :rules="rules" ref="formRef" label-width="100px" class="good-form">
      <el-form-item label="分类名称" prop="name">
        <el-input type="text" v-model="ruleForm.name"></el-input>
      </el-form-item>
      <el-form-item label="排序值" prop="sort">
        <el-input type="number" v-model="ruleForm.sort"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="visible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import {ref,reactive,toRefs,getCurrentInstance} from 'vue'
import { useRoute } from 'vue-router'
import axios from '@/utils/axios'
import { ElMessage } from 'element-plus';
export default {
    name:'DialogAddCategory',
    props:{
        type:String,
        reload: Function
    },
    setup(props){    //组件传值一定要写props,不然props拿不到
        //获取当前组件的实例
        const { proxy }  = getCurrentInstance();
        const formRef=ref(null)   //固定写法
        const route=useRoute()
        const state=reactive({
            visible:false,
            categoryLevel:1,
            parentId:0,
            ruleForm:{
                name:'',
                sort:''
            },
            rules:{
                name:[
                    {required: true, message:'请输入分类名称', trigger: 'blur'}
                ],
                sort:[
                    {required: true, message:'请输入排序值', trigger: 'blur'}
                ]
            }
        })
        //开启弹窗
        const open=(id)=>{
            state.visible=true
            if(id){
                //编辑模式
                state.id=id
                getDetail(id)
            }else {
                //新增模式
                //从路由处拿到level,和parent_id
                const {level=1,parent_id=0}=route.query
                state.ruleForm={
                    name:'',
                    sort:''
                }
                state.categoryLevel=level
                state.parentId=parent_id
            }
        }
        // 关闭弹窗
        const close=()=>{
            state.visible=false
        }
        // 获取详情
        const getDetail=(id)=>{
            axios.get(`/categories/${id}`).then((res) => {
                state.ruleForm={
                    name:res.categoryName,
                    sort:res.categoryRank
                }
                state.parentId=res.parentId
                state.categoryLevel=res.parentId
            })
        }
        //提交
        const submitForm=()=>{
            formRef.value.validate(valid=>{
                console.log(valid);
                if(valid){
                    if(props.type=='add'){
                        axios.post('/categories',{
                            categoryLevel:state.categoryLevel,
                            parentId:state.parentId,
                            categoryName:state.ruleForm.name,
                            categoryRank:state.ruleForm.sort
                        }).then(res=>{
                            state.visible=false
                            ElMessage.success('添加成功')
                            props.reload&&props.reload()
                        })
                    }else {
                        axios.put('/categories',{
                            categoryId:state.id,
                            categoryLevel:state.categoryLevel,
                            parentId:state.parentId,
                            categoryName:state.ruleForm.name,
                            categoryRank:state.ruleForm.sort
                        }).then(res=>{
                            state.visible=false
                            // ElMessage.success('修改成功')
                            proxy.$message.success('修改成功')   //两种方法相同
                            props.reload&&props.reload()
                        })
                    }
                }
            })
        }
        return{
            ...toRefs(state),
            formRef,
            route,
            getDetail,
            open,
            close,
            submitForm,
            proxy
        }
    }
}
</script>

<style>

</style>